<template>
  <div class="header" :style="backgroundBg">
    <Navbar :bg="navBg" :title="navTitle">
      <template #action>
        <div class="action" @click="onSettingClick">
          <SvgIcon iconName="setting" color="var(--primary-text-color)" size="25px" />
        </div>
      </template>
    </Navbar>
    <div class="banner">
      <div class="chart">
        <div class="off-mask" v-if="deviceInfo.offOn === 0"></div>

        <div class="name">微生物</div>
        <div class="level">{{ germ }}</div>
        <div class="description">
          PM2.5:
          <span>{{ deviceInfo.pm }}</span>
          μg/m³
        </div>
      </div>
      <div class="data-items">
        <van-row>
          <van-col span="12" v-for="item in r_bannerItems" :key="item.id">
            <div class="item">
              <div class="icon"><SvgIcon :iconName="item.svg" color="#D7E5FC" size="38px" /></div>
              <div class="description">
                <div class="num">{{ item.num }}</div>
                <div class="text">{{ item.description }}</div>
              </div>
            </div>
          </van-col>
        </van-row>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Navbar from '../Navbar.vue'
import { bannerItems } from '@/utils/enum'
import { germFilter } from '@/utils/filter'
import { ref, computed, watch, reactive } from 'vue'
import { useStore } from 'vuex'

import { useRouter } from 'vue-router'
import offBg from '../../assets/images/off-bg.png'
import onBg from '../../assets/images/home-top-bg.png'

const store = useStore()

console.log('useStoreuseStoreuseStore===', store)

const router = useRouter()

const navBg = ref('')
const navTitle = ref('空管系统')
const r_bannerItems = reactive(bannerItems)
const germ = ref<string>('')
const updateItemsData = (info: any) => {
  germ.value = germFilter(info.germ)
  r_bannerItems[0].num = info.temp
  r_bannerItems[1].num = info.humidity
  r_bannerItems[2].num = info.oxygen
  r_bannerItems[3].num = info.tvoc
  r_bannerItems[4].num = info.sensor
  r_bannerItems[5].num = info.kpa
}

updateItemsData(store.state.deviceInfo)

watch(
  () => store.state,
  val => {
    console.log('store数据变化了==', val)
    const { deviceInfo } = val
    if (deviceInfo) {
      updateItemsData(deviceInfo)
    }
  },
  { deep: true }
)

const deviceInfo = computed(() => store.state.deviceInfo)

// 关机/开机的背景图片的切换
const backgroundBg = computed(() => {
  if (store.state.offOn === 1) {
    return {
      backgroundImage: `url(${onBg})`
    }
  } else {
    return {
      backgroundImage: `url(${offBg})`
    }
  }
})

const onSettingClick = () => {
  console.log('click')
  router.push('/settings')
}
</script>
<style lang="less" scoped>
@import url(../../assets/fonts/fonts.less);
@import url(../../assets/style/header.less);
</style>
